<template>
  <div class="answers-details">
    <div class="wrapper w">
      <el-breadcrumb :separator-icon='CaretRight'>
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item to="/special/column">专栏</el-breadcrumb-item>
        <el-breadcrumb-item>文章详情</el-breadcrumb-item>
      </el-breadcrumb>
      <main>
        <div class="answers-details__main">
          <Article v-if="article" type="article" :item="article!" />
          <div class="comment-list">
            <div class="comment-list__header">
              <span class="comment-list__header__title">2个回答</span>
              <div class="comment-list__header__icons">
                <label class="counts">
                  <input type="radio" checked name="comment">
                  <span>得票数</span>
                </label>
                <label class="news">
                  <input type="radio" name="comment">
                  <span>最新</span>
                </label>
              </div>
            </div>
            <Comment v-for="_ in 2" />
          </div>
          <LoginState />
        </div>
        <div class="answers-details__aside">
          <!-- 用户信息 -->
          <div class="user-info">
            <div class="user-info__header flex-ac">
              <img src="../../assets/vue.svg" class="avatar" />
              <span class="username">{{ article?.user.nickname }}</span>
            </div>
            <div class="user-info__center flex-ac">
              <div class="reputation flex-ac">
                <span class="count">{{ user?.reputationCount! > 1000 ?
                  (user?.reputationCount! / 1000).toFixed(2) + 'k' : user?.reputationCount }}</span>
                <span>声望</span>
              </div>
              <div class="fans flex-ac">
                <span class="count">{{ user?.fansCount! > 1000 ?
                  (user?.fansCount! / 1000).toFixed(2) + 'k' : user?.fansCount }}</span>
                <span>粉丝</span>
              </div>
            </div>
            <button class="btn">{{ !user?.isInterest ? "关注作者" : "已关注" }}</button>
          </div>
          <Card :isIcon="false" title="宣传栏">
            <div class="publicize">
              <div class="publicize__item" v-for="_ in 3">
                <div class="publicize__item__title">前端性能优化设计12问</div>
                <div class="publicize__item__desc">前端性能优化,面试的必问题目</div>
              </div>
            </div>
          </Card>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CaretRight } from '@element-plus/icons-vue';
import Comment from '@/components/comment/index.vue';
import Article from '@/view/answersDetails/Article.vue';
import LoginState from '@/view/answersDetails/Login-State.vue';
import Card from '@/view/Answers/Card.vue';
import { ref, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import { specualDetailsApi } from '@/api/specualApi';
import { ISpecual } from '@/interface/ISpecual';
import { IUser } from '@/interface/IUser'
const route = useRoute();
const article = ref<ISpecual>();
const user = ref<IUser>()
onBeforeMount(() => {
  specualDetailsApi(route.params?.id as string).then(res => {
    article.value = res.data;
    user.value = res.data?.user;
  })
})

</script>

<style lang="scss" scoped>
.answers-details {
  background-color: #e9ecef;

  .wrapper {
    display: grid;
    grid-template-rows: 40px 1fr;

    >main {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 20px;
    }
  }

  &__main {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .comment-list {
      display: grid;
      grid-template-rows: 60px 1fr;
      background-color: #fff;
      border-radius: 2px;

      &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 20px;
        border-bottom: 1px solid #efefef;

        &__title {
          font-size: 18px;
        }

        &__icons {
          display: flex;
          align-items: center;

          input[type="radio"] {
            width: 0;
            height: 0;
            appearance: none;
          }

          label {
            background-color: #fff;
            border: 1px solid #eee;
            padding: 6px 10px;
            min-width: 70px;
            text-align: center;
            color: $color;
            font-size: 14px;

            &:has(input[type="radio"]:checked) {
              background-color: $color;
              color: #fff;
            }
          }
        }
      }
    }



    .similar {
      background-color: red;
      display: grid;
      grid-template-rows: 60px 1fr;
      background-color: #fff;
      border-radius: 2px;
      padding-bottom: 30px;
      margin-bottom: 20px;

      &__header {
        border-bottom: 1px solid #efefef;
        padding: 0 20px;

        &__title {
          font-size: 18px;
        }
      }

      &__footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 20px;

        .wran {
          color: $color;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  &__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .publicize {
      display: grid;
      grid-template-columns: 1fr;
      padding: 0 10px 10px;

      &__item {
        padding: 6px 10px;

        &__title {
          font-weight: bold;
          color: #00965E;
          margin: 4px 0;
        }

        &__desc {
          font-size: 14px;
          color: #727B82;
        }
      }
    }
  }

  :deep(.el-breadcrumb) {
    display: flex;
    align-items: center;
    font-size: 16px;
  }
}

.drop {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10e0b6;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background-color: #fff;
  border-radius: 6px;

  &__header {
    gap: 10px;

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }

    .username {
      font-size: 18px;
    }
  }

  &__center {
    gap: 20px;

    .count {
      font-size: 12px;
      font-weight: bold;
    }

    .reputation,
    .fans {
      gap: 2px;
      font-size: 14px;
      color: #2C2C2C;
    }
  }

  >button {
    background-color: $color;
    font-size: 16px;
    letter-spacing: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
</style>